<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-box">
      <input 
        class="search-input"
        placeholder="🔍 输入关键词搜索知识库"
        placeholder-class="placeholder-style"
        v-model="searchKeyword"
        @input="handleSearch"
      />
    </view>

    <!-- 知识列表 -->
    <scroll-view class="content-scroll" scroll-y="true">
      <view 
        class="article-card" 
        v-for="item in filteredList" 
        :key="item.id"
        @click="showArticleDetail(item)"
      >
        <view class="article-header">
          <text class="category-tag">{{ item.category }}</text>
          <text class="update-time">{{ formatTime(item.updated_at) }}</text>
        </view>
        <text class="article-title">{{ item.title }}</text>
        <view class="article-footer">
          <text class="author">作者：{{ item.author }}</text>
        </view>
      </view>
      <view v-if="filteredList.length === 0" class="empty-tips">
        没有找到相关结果
      </view>
    </scroll-view>

    <!-- 文章详情弹窗 -->
    <view v-if="showDialog" class="dialog-mask" @click="closeDialog">
      <view class="dialog-content" @click.stop>
        <scroll-view scroll-y="true" class="dialog-scroll">
          <view class="dialog-header">
            <text class="dialog-category">{{ selectedArticle.category }}</text>
            <text class="close-btn" @click="closeDialog">×</text>
          </view>
          <text class="dialog-title">{{ selectedArticle.title }}</text>
          <view class="dialog-meta">
            <text class="dialog-author">作者：{{ selectedArticle.author }}</text>
            <text class="dialog-time">更新：{{ formatTime(selectedArticle.updated_at) }}</text>
          </view>
          <text class="dialog-body">{{ selectedArticle.content }}</text>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import baseUrl from '../../static/path.js'
export default {
  data() {
    return {
      searchKeyword: '',
      showDialog: false,
      selectedArticle: null,
      filteredList: [],
      knowledgeList: [
        {
          id: 1,
          title: '如何应对焦虑情绪的有效方法',
          category: '心理健康',
          author: '王心理师',
          updated_at: '2023-08-15T10:30:00',
          content: '焦虑情绪是常见的心理问题，可以通过以下方法缓解：\n1. 深呼吸练习\n2. 正念冥想\n3. 适度运动\n4. 与信任的人交流'
        },
        {
          id: 2,
          title: '压力管理的五个技巧',
          category: '压力管理',
          author: '李咨询师',
          updated_at: '2023-08-16T14:20:00',
          content: '有效压力管理方法包括：\n• 优先级排序\n• 时间管理\n• 学会拒绝\n• 适当休息\n• 寻求专业帮助'
        }
      ]
    }
  },
  mounted() {
    const token = uni.getStorageSync('access_token');
    if (!token) {
        uni.reLaunch({
            url: '/pages/login/login'
        });
        return;
    }
    uni.request({
        url: baseUrl + '/user/get_knowledge',
        method: 'GET',
        success: (res) => {
            if (res.statusCode === 200) {
                this.knowledgeList = res.data;
				this.filteredList = [...this.knowledgeList];
            } else {
                uni.showToast({
                    title: '获取信息失败',
                    icon: 'none'
                });
            }
        },
        fail: (err) => {
            uni.showToast({
                title: '网络错误',
                icon: 'none'
            });
        }
    });
  },
  methods: {
    formatTime(timeStr) {
      return new Date(timeStr).toLocaleDateString()
    },
    handleSearch() {
      const keyword = this.searchKeyword.toLowerCase().trim();
      if (!keyword) {
        this.filteredList = [...this.knowledgeList];
        return;
      }
      
      this.filteredList = this.knowledgeList.filter(item => {
        return item.title.toLowerCase().includes(keyword) || 
               item.content.toLowerCase().includes(keyword) ||
               item.author.toLowerCase().includes(keyword)
      });
    },
    showArticleDetail(item) {
      this.selectedArticle = item
      this.showDialog = true
    },
    closeDialog() {
      this.showDialog = false
      this.selectedArticle = null
    }
  }
}
</script>

<style>
.container {
  background-color: #f0f8ff;
  height: 896px;
  width: 414px;
}

.search-box {
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
}

.search-input {
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #333;
}

.placeholder-style {
  color: #999;
}

.content-scroll {
  height: calc(896px - 160rpx);
  padding: 20rpx;
}

.article-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  margin-right: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.category-tag {
  background-color: #e3f2fd;
  color: #2196F3;
  padding: 8rpx 20rpx;
  border-radius: 32rpx;
  font-size: 24rpx;
}

.update-time {
  color: #999;
  font-size: 24rpx;
}

.article-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.article-footer {
  border-top: 1rpx solid #eee;
  padding-top: 20rpx;
}

.author {
  color: #666;
  font-size: 26rpx;
}

.empty-tips {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  padding: 40rpx;
}

.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.dialog-content {
  background: #fff;
  width: 80%;
  max-height: 70vh;
  border-radius: 16rpx;
  padding: 30rpx;
  animation: popup 0.3s ease;
}

@keyframes popup {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.dialog-scroll {
  max-height: 60vh;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.dialog-category {
  background-color: #e3f2fd;
  color: #2196F3;
  padding: 8rpx 20rpx;
  border-radius: 32rpx;
  font-size: 24rpx;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  padding: 10rpx 20rpx;
}

.dialog-title {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.dialog-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  color: #666;
  font-size: 24rpx;
}

.dialog-body {
  font-size: 28rpx;
  color: #444;
  line-height: 1.6;
  white-space: pre-wrap;
  text-indent: 2em;
}
</style>